<template>
  <div class="login" ref="div" @click="showToConsultant = false">
    <!--topnav-->
    <top-nav :curpages="2"></top-nav>

    <div class="com-middle">
      <!--<img src="../../assets/product/pro-bg.jpg" alt="" class="comm-bg">-->
      <div class="comm-content">
        <h3>产品详情</h3>

        <div class="product-details">

          <img src="../../assets/consultant/productdetail-left-banner.jpg" alt="" class="left-img">

          <div class="pd-detail clear">
            <div class="pdd-one">
              <p>{{productDetail.name}}</p>
              <p><span>{{productDetail.rate}}</span>预期年化收益</p>
            </div>
            <div class="pdd-two">
              <span>起投金额:<i>{{productDetail.startUpNum}}万元</i></span>
              <span>投资周期:<i>{{productDetail.period}}个月</i></span>
            </div>
            <div class="pdd-list-1">
              <span>
                产品描述:
              </span>
              <span>
                <!--单季赢是经过汇睿德资产安全保障系统审核通过的优质出借项目。汇睿德只选择以车辆抵押为基础的借款需求，极大的降低了项目风险，在满足借款人投资需求的同时提升了投资体验。-->
                {{productDetail.description}}
              </span>
            </div>
            <div class="pdd-list">
              <span>投资周期:</span>
              <span>{{productDetail.period}}个月</span>
            </div>
            <div class="pdd-list">
              <span>收益方式:</span>
              <span>{{productDetail.incomeMethod}}</span>
            </div>
            <div class="pdd-list">
              <span>适合人群:</span>
              <span>
                {{productDetail.suitCrowds}}
              </span>
            </div>
            <a class="pdd-link">
              <img src="../../assets/consultant/want-invest.png" alt="" @click.stop="showToConsultant = true">
              <transition name="fade">
              <div class="to-consultant" v-show="showToConsultant" transiton="fade"><img src="../../assets/common/consultant.png" alt=""></div>
              </transition>
            </a>
          </div>
          <router-link class="pd-link" to="/productList">返回产品列表</router-link>
        </div>

      </div>

    </div>

    <bottom></bottom>

  </div>
</template>

<script>
  import topNav from '@/components/topNav/topnav'
  import bottom from '@/components/bottom/bottom'
  import {mapActions} from 'vuex'
  import api from '@/utils/api'
  import http from '@/utils/http'

  export default {
    name: "productDetail",
    components: {
      topNav,
      bottom
    },
    data() {
      return {
        curActive: 1,
        productDetail: '',
        showToConsultant:false
      }
    },
    computed: {},
    methods: {
      init() {
        let id = this.$router.currentRoute.params.id
        console.log(id);
        this.$store.dispatch('Get', {
          url: api.productInfo(id)
        }).then((res) => {
          this.productDetail = res.data
        })
      }
    },
    mounted() {
      this.init()
    }
  }
</script>
<style scoped lang="scss">
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-active {
    opacity: 0
  }
  .com-middle {
    width: 100%;
    min-width: 1210px;
    background: url(../../assets/product/pro-bg.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    .comm-content {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      h3 {
        width: 100%;
        height: 65px;
        background: url(../../assets/product/line.png) center no-repeat;
        background-size: 1200px 4px;
        text-align: center;
        color: #ffffff;
        font-size: 42px;
        line-height: 65px;
        margin-top: 110px;
      }
      .product-details {
        width: 996px;
        height: 645px;
        margin: 50px auto;
        background: rgba(255, 255, 255, .6);
        .left-img {
          width: 200px;
          height: 645px;
          float: left;

        }
        .pd-detail {
          width: 796px;
          height: 590px;
          float: left;
          margin-top: 65px;
          overflow: hidden;
          .pdd-one {
            width: 100%;
            float: left;
            p:nth-of-type(1) {
              width: 280px;
              height: 78px;
              line-height: 78px;
              text-align: center;
              font-weight: 800;
              font-size: 40px;
              font-family: "Yuanti SC", YouYuan, Wawati SC, NSimSun;
              color: #484847;
              float: left;
              margin-left: 55px;
              overflow: hidden;
            }
            p:nth-of-type(2) {
              span {
                font-weight: 800;
                font-size: 36px;
                font-family: "Yuanti SC", YouYuan, Wawati SC, NSimSun;
                color: #484847;
                float: left;
                line-height: 90px;
                margin-left: 40px;
                margin-right: 20px;
              }
              font-size: 22px;
              color: #484847;
              float: left;
              line-height: 90px;

            }
          }
          .pdd-two {
            width: 100%;
            text-align: left;
            margin-top: 12px;
            float: left;
            span {
              font-size: 24px;
              color: #484847;
              margin-left: 55px;
              i {
                font-style: normal;
                color: #ff6430;
                font-size: 28px;
              }

            }

          }
          .pdd-list-1 {
            width: 710px;
            float: left;
            margin-left: 50px;
            text-align: left;
            margin-top: 40px;
            span:nth-of-type(1) {
              font-size: 22px;
              color: #ff6430;
              line-height: 36px;
            }
            span:nth-of-type(2) {
              font-size: 22px;
              color: #484847;
              line-height: 36px;
            }
          }
          .pdd-list {
            width: 710px;
            text-align: left;
            margin-top: 8px;
            float: left;
            margin-left: 50px;
            span:nth-of-type(1) {
              font-size: 22px;
              color: #ff6430;
              /*margin-left: 55px;*/

            }
            span:nth-of-type(2) {
              font-size: 22px;
              color: #484847;
              line-height: 36px;
            }
          }
          .pdd-link {
            width: 193px;
            height: 56px;
            margin: 20px 0 0 300px;
            cursor: pointer;
            float: left;
            position: relative;
            img {
              display: block;
            }
            .to-consultant {
              position: absolute;
              right: -270px;
              top: -50px;
            }
          }
        }
        .pd-link {
          float: right;
          color: #ffffff;
        }

      }

    }
  }
  @media (max-width: 1400px) {
    .com-middle {
      width: 100%;
      min-width: 1210px;
      background: url(../../assets/product/pro-bg.jpg) center no-repeat;
      background-size: cover;
      position: relative;
      .comm-content {
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;

        h3 {
          width: 100%;
          height: 65px;
          background: url(../../assets/product/line.png) center no-repeat;
          background-size: 1200px 4px;
          text-align: center;
          color: #ffffff;
          font-size: 36px;
          line-height: 65px;
          margin-top: 110px;
        }
        .product-details {
          width: 860px;
          height: 620px;
          margin: 50px auto;
          background: rgba(255, 255, 255, .6);
          .left-img {
            width: 160px;
            height: 620px;
            float: left;

          }
          .pd-detail {
            width: 700px;
            height: 620px;
            float: left;
            margin-top: 65px;
            overflow: hidden;
            .pdd-one {
              width: 100%;
              float: left;
              p:nth-of-type(1) {
                font-weight: 800;
                font-size: 34px;
                font-family: "Yuanti SC", YouYuan, Wawati SC, NSimSun;
                color: #484847;
                float: left;
                margin-left: 55px;
                width:240px;
                height: 81px;
                overflow: hidden;
                line-height: 81px;
                text-align: left;
              }
              p:nth-of-type(2) {
                span {
                  font-weight: 800;
                  font-size: 32px;
                  font-family: "Yuanti SC", YouYuan, Wawati SC, NSimSun;
                  color: #484847;
                  float: left;
                  line-height: 90px;
                  margin-left: 40px;
                  margin-right: 20px;
                }
                font-size: 20px;
                color: #484847;
                float: left;
                line-height: 90px;

              }
            }
            .pdd-two {
              width: 100%;
              text-align: left;
              margin-top: 12px;
              float: left;
              span {
                font-size: 24px;
                color: #484847;
                margin-left: 55px;
                i {
                  font-style: normal;
                  color: #ff6430;
                  font-size: 28px;
                }

              }

            }
            .pdd-list-1 {
              width: 600px;
              float: left;
              margin-left: 50px;
              text-align: left;
              margin-top: 40px;
              span:nth-of-type(1) {
                font-size: 18px;
                color: #ff6430;
                line-height: 36px;
              }
              span:nth-of-type(2) {
                font-size: 18px;
                color: #484847;
                line-height: 36px;
              }
            }
            .pdd-list {
              width: 600px;
              text-align: left;
              margin-top: 8px;
              float: left;
              margin-left: 50px;
              span:nth-of-type(1) {
                font-size: 18px;
                color: #ff6430;
                /*margin-left: 55px;*/

              }
              span:nth-of-type(2) {
                font-size: 18px;
                color: #484847;
                line-height: 36px;
              }
            }
            .pdd-link {
              width: 170px;
              height: 48px;
              margin: 20px 0 0 260px;
              cursor: pointer;
              float: left;
              position: relative;
              img {
                width: 100%;
                display: block;
              }
              .to-consultant {
                position: absolute;
                right: -270px;
                top: -50px;
              }
            }
          }
          .pd-link {
            float: right;
            color: #ffffff;
          }

        }

      }
    }
  }
</style>
